<template>
<div class="login-container">
<div id="app">
    <!-- 卡片组件 -->
    <el-card class='login-card'>
      <h1 class="title">后台登录</h1>
      <!-- 登录表单 -->
      <el-form ref="loginForm" style="margin-top: 50px" :model="loginForm" :rules="loginRules">
        <el-form-item prop="username">
          <el-input type="text" v-model="loginForm.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" v-model="loginForm.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="loading" style="width: 100%" @click="handleLogin">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</div>
</template>


<script src="https://whois.pconline.com.cn/ipJson.jsp?json=true"></script>
<script>
import { login, addLoginLog } from '@/api/login'
import { Session } from '@/utils/storage';

 export default {
  name: 'Login',
  data () {
   return {
  loginForm: {
        username: 'test',
        password: '1234567'
      },
      loginRules: {  username: [{ required: true, message: '用户名不能为空', trigger: 'blur' },
          { min: 2, max: 11, message: '用户名应为2-11位的长度', trigger: 'blur' }],
        password: [{ required: true, message: '密码不能为空', trigger: 'blur' }, {
          min: 6, max: 16, message: '密码应为6-16位的长度', trigger: 'blur'
        }]},
        loading: false,
   }
  },
  props:{},
  components: {

  },
  created () {

  },
  mounted () {
  }, 
  methods: {
    async handleLogin(){
        this.$refs.loginForm.validate(async isOk => {
        if (isOk) {
          try {
            this.loading = true
            // 只有校验通过了 我们才去调用action
            const data = await login( this.loginForm)
            
            if(data.length < 1) {
                this.$message.error('登录失败')
            }else {
                // 保存登录日志
                const ip = returnCitySN["cip"]
                const qcellcore = await this.$jsonp('https://whois.pconline.com.cn/jsFunction.jsp')
                const logintime = new Date()
                await addLoginLog({ ip, qcellcore, user_ukey: data[0].ukey, logintime, nickname: data[0].nickname})

                 setTimeout(() => {
				let defaultRoles = [];
				let defaultAuthBtnList = [];
				// admin 页面权限标识，对应路由 meta.roles
				let adminRoles = ['admin'];
				// admin 按钮权限标识
				let adminAuthBtnList = ['btn.add', 'btn.del', 'btn.edit', 'btn.link'];
				// common 页面权限标识，对应路由 meta.roles
				let testAuthPageList = ['common'];
				// test 按钮权限标识
				let testAuthBtnList = ['btn.add', 'btn.link'];
				if (this.loginForm.username === 'admin') {
					defaultRoles = adminRoles;
					defaultAuthBtnList = adminAuthBtnList;
				} else {
					defaultRoles = testAuthPageList;
					defaultAuthBtnList = testAuthBtnList;
				}
				const userInfos = {
					username: this.loginForm.username === 'admin' ? 'admin' : 'test',
					photo:
						this.loginForm.username === 'admin'
							? 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.jpg'
							: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=317673774,2961727727&fm=26&gp=0.jpg',
					time: new Date().getTime(),
					roles: defaultRoles,
					authBtnList: defaultAuthBtnList,
                    item: data
				};
				// 存储 token 到浏览器缓存
				Session.set('token', Math.random().toString(36).substr(0));
				// 存储用户信息到浏览器缓存
				Session.set('userInfo', userInfos);
				// 存储用户信息到vuex
				this.$store.dispatch('userInfos/setUserInfos', userInfos);

				window.location.href = `${window.location.origin}${window.location.pathname}`;
				setTimeout(() => {
					this.$message.success(`${this.currentTime}，${this.$t('message.login.signInText')}`);
				}, 300);
			}, 300);
            }
          } catch (error) {
            console.log(error)
          } finally {
            //  不论执行try 还是catch  都去关闭转圈
            this.loading = false
          }
        }
      })
      }
  }, 
  computed: {},
  watch:{}
 }
</script>

<style scoped lang="scss">
#app {
   width: 100%;
   height: 100vh;
   background-image: url('~@/assets/common/login.jpg'); // 设置背景图片
   display: flex;
   justify-content: center;
   align-items: center;
   .title{
       color: #00a0ff;
       text-align: center;
   }
 }
 .login-card {
   width: 440px;
   height: 300px;
 }
</style>
